<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>框模型-内边距</title>
    <style>
        *{
            color: white;
        }
        .outer-l{
            background: green;
            margin: 20px;
            padding-left: 20px;
        }
        .outer-r{
            background: green;
            margin: 20px;
            padding-right: 20px;
        }
        .outer-t{
            background: green;
            margin: 20px;
            padding-top: 20px;
        }
        .outer-b{
            background: green;
            margin: 20px;
            padding-bottom: 20px;
        }
        .inner{
            background: red;
            margin: 0px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="outer-l">
        <div class="inner">
            padding-left
        </div>
    </div>
    <div class="outer-r">
        <div class="inner">
            padding-right
        </div>
    </div>
    <div class="outer-t">
        <div class="inner">
            padding-top
        </div>
    </div>
    <div class="outer-b">
        <div class="inner">
            padidng-bottom
        </div>
    </div>
</body>